import { DatePicker, Select } from "antd"
import lessModule from "./index.module.less"
import { useEffect, useState } from "react"
import dayjs from "dayjs"


// 主页-分析组件-相关性组件
interface componentInterface {
    name: string
    sourceOption: Array<string>
    sourceList:Array<object>
}
const HomePage_AnalysisComponent_CorrelationComponent: React.FC<componentInterface> = (props) => {
    const [valueList, setValueList] = useState<Array<string>>([])
    let [optionList, setOptionList] = useState<Array<object>>([])
    const [correlation,setCorrelation]=useState<string | number>("-")
    const change_select = (idx: number, value: string) => {
        valueList[idx] = value
        optionList.forEach((item) => {
            item["disabled"] = valueList.includes(item["label"])
        })
        setCorrelation(props.sourceList.filter((item)=> item["name"].includes(valueList[0]) && item["name"].includes(valueList[1]))?.[0]?.["value"] ?? "-")
        setValueList([...valueList])
        setOptionList([...optionList])
    }
    const make_select = () => {
        setValueList([props.sourceOption[0], props.sourceOption[1]])
        setCorrelation(props.sourceList.filter((item)=> item["name"].includes(props.sourceOption[0]) && item["name"].includes(props.sourceOption[1]))?.[0]?.["value"] ?? "-")
        optionList = []
        props.sourceOption.forEach((item, idx) => {
            optionList.push({ label: item, disabled: idx < 2 })
        })
        setOptionList([...optionList])
    }

    useEffect(() => {
        make_select()
    }, [props.sourceOption])
    return (
        <div className={lessModule["homePageAnalysisComponentCorrelationComponent"]}>
            {
                Array.from({ length: 3 }, (_, i) => i + 1).map((_, idx) => (
                    <div key={`column${idx}`} className={lessModule["homePageAnalysisComponentCorrelationComponent-column"]} style={{ width: idx < 2 ? "40%" : "20%" }}>
                        <div>{idx < 2 ? `${props.name.split("名称")[0]}${idx + 1}` : "相关性"}</div>

                        {
                            idx < 2 && <Select popupClassName="homePageAnalysisComponentCorrelationComponent-column__select" value={valueList[idx]} options={optionList} onChange={(value: string) => change_select(idx, value)}
                                fieldNames={{ value: "label" }}></Select>
                        }
                        {
                            idx === 2 && <span className={lessModule["homePageAnalysisComponentCorrelationComponent-column__value"]}>{correlation}</span>
                        }
                    </div>
                ))
            }
        </div>
    )
}



export default HomePage_AnalysisComponent_CorrelationComponent